<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript代替模板功能</title>
</head>
<body>

<!--<div id="app">-->
        <!--<p v-if="show==true">show的值为true</p>-->
        <!--<p v-else>show的值为false</p>-->
        <!--<button type="button" @click="handleClick">切换show</button>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--show: true-->
        <!--},-->
        <!--methods: {-->
            <!--handleClick: function () {-->
                <!--this.show = !this.show-->
            <!--}-->
        <!--}-->
    <!--})-->
<!--</script>-->


<!--<div id="app">-->
    <!--<my-component :show="show">-->
    <!--</my-component>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--props: ['show'],-->
        <!--template:"<div><p v-if='childShow==true'>show的值为true</p>" +-->
            <!--"        <p v-else>show的值为false</p>\n" +-->
            <!--"        <button type='button' @click='handleClick'>切换show</button></div>",-->
        <!--data: function() {-->
            <!--return {-->
                <!--childShow: this.show-->
            <!--}-->
        <!--},-->
        <!--methods: {-->
            <!--handleClick: function () {-->
                <!--this.childShow = !this.childShow;-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--show: true-->
        <!--},-->
    <!--})-->
<!--</script>-->



<!--<div id="app">-->
    <!--<my-component :show="show">-->
    <!--</my-component>-->
    <!--<button type="button" @click="show= !show">切换show</button>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--if(this.show){-->
                <!--return createElement('p','show的值为true')-->
            <!--}else{-->
                <!--return createElement('p','show的值为false')-->
            <!--}-->
        <!--},-->
        <!--props: {-->
            <!--show: {-->
                <!--type: Boolean,-->
                <!--default: false-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--show: false-->
        <!--},-->
    <!--})-->
<!--</script>-->




<!--<div id="app">-->
    <!--<ul>-->
        <!--<li v-for='(item,index) of lists' :key='index'>{{ item }}</li>-->
    <!--</ul>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--lists: [-->
                <!--'HTML',-->
                <!--'CSS',-->
                <!--'JavaScript'-->
            <!--]-->
        <!--},-->
    <!--})-->
<!--</script>-->



<!--<div id="app">-->
    <!--<my-component :lists="lists"></my-component>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--var nodes =[];-->
            <!--for(var i = 0;i<this.lists.length;i++){-->
                <!--nodes.push(createElement('p',this.lists[i]))-->
            <!--}-->
            <!--return createElement('div',nodes);-->

        <!--},-->
        <!--props: {-->
            <!--lists: {-->
                <!--type: Array,-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--lists: [-->
            <!--'HTML',-->
            <!--'CSS',-->
            <!--'JavaScript'-->
            <!--]-->
        <!--},-->
    <!--})-->
<!--</script>-->





<!--<div id="app">-->
    <!--<my-component :lists="lists"></my-component>-->
    <!--<button type="button" @click="handleClick">显示列表</button>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--if(this.lists.length){-->
                <!--return createElement('ul',this.lists.map(function (item) {-->
                    <!--return createElement('li',item)-->
                <!--}));-->
                <!--// var nodes = [];-->
                <!--// for(var i=0;i<this.lists.length;i++){-->
                <!--//     nodes.push(createElement('li',this.lists[i]))-->
                <!--// }-->
                <!--// return createElement('ul',nodes)-->
            <!--}else{-->
                <!--return createElement('p','列表内容为空')-->
            <!--}-->

        <!--},-->
        <!--props: {-->
            <!--lists: {-->
                <!--type: Array,-->
                <!--default: function () {-->
                    <!--return [];-->
                <!--}-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
        <!--data: {-->
            <!--lists: []-->
        <!--},-->
        <!--methods: {-->
            <!--handleClick: function () {-->
               <!--this.lists=[-->
                    <!--'HTML',-->
                    <!--'CSS',-->
                    <!--'JavaScript'-->
                <!--];-->
            <!--}-->
        <!--}-->
    <!--})-->
<!--</script>-->





<!--<div id="app">-->
    <!--<my-component></my-component>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--var _this = this;-->
            <!--return createElement('div',[-->
                <!--createElement('input',{-->
                    <!--domProps: {-->
                        <!--value: this.value-->
                    <!--},-->
                    <!--on: {-->
                        <!--input: function (event) {-->
                          <!--_this.value=event.target.value;-->
                        <!--}-->
                    <!--}-->
                <!--}),-->
                <!--createElement('p','value：'+this.value)-->
            <!--])-->
        <!--},-->
        <!--data: function () {-->
            <!--return {-->
                <!--value: ''-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
    <!--})-->





<!--<div id="app">-->
    <!--<my-component></my-component>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--var _this = this;  //_this指原来的对象，this指现在的对象-->
            <!--//渲染聊天列表-->
            <!--if(this.list.length){-->
                <!--var listNode = createElement('ul',this.list.map(function (item) {-->
                    <!--return createElement('li',item);-->
                <!--}));-->
            <!--}else{-->
                <!--var listNode = createElement('p','暂无聊天内容')-->
            <!--}-->
            <!--return createElement('div',[-->
                <!--listNode,-->
                <!--createElement('input',{-->
                    <!--attrs: {-->
                        <!--placeholder: '输入内容，按回车键发送'-->
                    <!--},-->
                    <!--style: {-->
                        <!--width: '200px'-->
                    <!--},-->
                    <!--on: {-->
                        <!--keyup: function (event) {-->
                            <!--//如果不是回车键则不发送数据-->
                            <!--if(event.keyCode !== 13) return;-->
                            <!--//添加输入的内容到聊天列表-->
                            <!--_this.list.push(event.target.value);-->
                            <!--//信息发送后，清空输入框-->
                            <!--event.target.value='';-->
                        <!--}-->
                    <!--}-->
                <!--})-->
            <!--])-->
        <!--},-->
        <!--data: function () {-->
            <!--return {-->
                <!--value: '',-->
                <!--list: []-->
            <!--}-->
        <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
    <!--})-->
<!--</script>-->




<!--<div id="app">-->
    <!--<my-component></my-component>-->
    <!--<my-component>-->
        <!--<p>这是slot的内容</p>-->
    <!--</my-component>-->
<!--</div>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script type="text/javascript">-->
    <!--Vue.component('MyComponent',{-->
        <!--render: function (createElement) {-->
            <!--if(this.$slots.default ===undefined){-->
                <!--return createElement('div','没有使用slot时显示的文本')-->
            <!--}else{-->
                <!--return createElement('div',this.$slots.default)-->
            <!--}-->
    <!--}-->
    <!--});-->
    <!--var app = new Vue({-->
        <!--el: "#app",-->
    <!--})-->
<!--</script>-->
</body>
</html>
